<template>
  <div class="login" v-loading = "loading">
    <!-- 头像 -->
    <div class="Avatar">
      <el-avatar :size="100" :src="circleUrl" />
      <h1>登录我的Pocket</h1>
    </div>
    <div class="loginCard">
      <p>当前设备ID</p>
      <p>{{port.device_id}}</p>
      <el-form ref="loginForm" :rules="loginRules" :label-position="'top'" label-width="auto" :model="loginData"
        style="max-width: 600px">
        <el-form-item label="登录密码" prop="password">
          <el-input show-password v-model="loginData.password" placeholder="请输入登录密码" />
        </el-form-item>
        <el-form-item>
          <div class="loginButton">
            <el-button style="width: 168px;height: 36px;">取消</el-button>
            <el-button style="width: 168px;height: 36px;" @click="loginSubmit(loginForm)" type="primary">登录</el-button>

          </div>
        </el-form-item>
      </el-form>
    </div>
    <iframe ref="myIframe" style="display: none;" id="myIframe" src="http://ts.aipocket-nas.igrsservice.com/#/" width="100%" height="100%"> </iframe>
<!--    <iframe ref="myIframe" style="display: none;" id="myIframe" :src="frameUrl" width="100%" height="100%"> </iframe>-->
<!--    <iframe ref="myIframe" style="display: none;" id="myIframe" src="http://localhost:8080/#/" width="100%" height="100%"> </iframe>-->
  </div>
</template>

<script setup>
import { ref, watch, onMounted,computed } from 'vue'
import { useRouter,useRoute } from 'vue-router';
import {login, nasLogin} from "@/api/index.js";
import { storeToRefs } from 'pinia'
import { usePortStore } from '@/stores/index'
import { ElMessage } from 'element-plus'
const router = useRouter()
const route = useRoute()
const circleUrl = ref('')
const { setPort,setUrl,baseURL } = usePortStore()
const { port } = storeToRefs(usePortStore())
const loginData = ref({ password: '' })
const loginForm = ref(null)
const showIframe = ref(false)
const myIframe = ref(null)
const loading = ref(false)
const frameUrl = computed(()=>{
  return "http://" + usePortStore().baseURL + ":91";
})

window.addEventListener('message', function (event) {
  if (event.data === 'logined') {
    console.log(route)
    router.push(route.redirectedFrom?.path ?? "/")
  }
})

onMounted(()=>{
  const host = route.query.host
  const pocket = route.query.pocket
  if(host !== undefined){
    setUrl(host)
    if(pocket != undefined){
      loading.value = true
      login({deviceId: pocket}).then(response => {
        setPort({...response.data, time: new Date().getTime()})
        loading.value = false
      })
    }
  }
})

//id校验规则
const idValidator = (rule, value, callback) => {
  setTimeout(() => {
      nasLogin({username: port.value.device_id, password: loginData.value.password}).then(response => {
        if (response.success == 200) {
          setPort({...port.value, userinfo: response.data})
          response.port =  port.value.port
          myIframe.value.contentWindow.postMessage({...response, message: 'login'}, '*');
          callback()
        } else {
          callback(new Error('密码错误，请重试'))
        }
      }).catch(error => {
        console.log(error)
      });

  }, 1000)
}
//设备密码校验规则
const loginRules = ref({
  password: [
    {
      required: true,
      message: '请输入登录密码',
      trigger: 'blur'
    },
    {
      validator: idValidator,
      trigger: 'submit'
    },
  ]
})

//提交登录
const loginSubmit = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('提交')
      router.push('/')
    }

  })
}
</script>

<style lang="scss" scoped>
.login {
  display: flex;
  flex-direction: column;
  align-items: center;

  .Avatar {
    width: 100%;
    margin-top: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    h1 {
      font-size: 24px;
      font-style: normal;
      font-weight: 600;
      margin-top: 20px;
    }
  }

  .loginCard {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    width: 420px;
    height: 257px;
    border-radius: 8px;
    border: 1px solid #B2B2B2;
    background: #FFF;
    padding: 30px;

    p {
      &:nth-child(1) {
        color: #000;
        font-weight: 600;
        margin-bottom: 8px;
      }

      &:nth-child(2) {
        color: #686868;

        font-family: "Microsoft YaHei";
        font-size: 14px;
        margin-bottom: 24px;
      }
    }

    .loginButton {
      width: 100%;
      margin-top: 10px;
      display: flex;
      justify-content: center;
      align-self: center;
    }
  }
}
</style>
